// 常用地址 交易平台
<template>
    <div class="platform-used">

        <citySelect :label="'选择省份：'" :select-list="prolist" :active-value="pageProvinceCode" @change="getProvinceCodeSelect"></citySelect>

        <div class="platform-used-main">
            <div class="item" v-for="item in list" :key="'platform' + item.code">
                <h3>{{item.city}}</h3>
                <div class="city">
                    <el-checkbox 
                        v-for="city in item.children" 
                        :key="'platform' + city.code" 
                        v-model="city.checked" 
                        @change="select(city)"
                        :disabled="isDisabled(city.checked)"
                    >
                            <el-tooltip
                                placement="top"
                                effect="light"
                                :content="city.city">
                                <span>{{city.city}}</span>
                            </el-tooltip>
                    </el-checkbox>
                </div>
            </div>
        </div>

        <transition name="el-fade-in-linear">
            <div class="arrow" v-show="arrowShow">
                <div class="left" v-show="leftArrowShow">
                    <el-button type="text" icon="el-icon-arrow-left"  @click="left"></el-button>
                </div>

                <!-- 占位div 勿删 -->
                <div></div>

                <div class="right" v-show="rightArrowShow">
                    <el-button type="text" icon="el-icon-arrow-right" @click="right"></el-button>
                </div>
            </div>
        </transition>

    </div>
</template>

<script>
import { mapState, mapGetters, mapActions, } from 'vuex';
import citySelect from '../../trading-platform/components/city-select.vue';

export default {
    head: {
    },
    props:{
        usedIdArr: {
            type: [Object,Array],
            default: () => ({})
        },
        isAllDisabled:{
            type: Boolean,
            default: false,
        },
    },
    components: { 
        citySelect,
    },

    data() {
        return {
            list:[],
            dialogVisible:false,
            currentCity:{},
            arrowShow:false,
            leftArrowShow:false,
            rightArrowShow:true,

            prolist:[],
            pageProvinceName:'',
            pageProvinceCode:'',
            pageCityName:'',
            pageCityCode:'',
        }
    },
    computed: {
        ...mapState({
            cityName: state => state.city.usersCityName,
        }),
        ...mapGetters({
            usersProvince: 'city/usersProvince',
            navigateData: 'navigate/navigateData'
        }),
    },
    watch: {
        usersProvince: {
            handler(n, o) {
                if(!!this.navigateData.jyptlist && this.navigateData.jyptlist.length > 0){
                    this.getProData();
                    this.getCityData();
                }
            },
            immediate:true
        },
        navigateData: {
            handler(n, o) {
                this.getCityData()
            },
            deep:true,
        },
        usedIdArr: {
            handler(n, o) {
                this.findIdByChecked()
            },
            deep:true,
            immediate:true
        },
    },
    methods: {
        //选择省份,切换
        getProvinceCodeSelect(val){
            this.pageProvinceName = val.city;
            this.pageProvinceCode = val.code;
            // // 换城市
            if(!val.children) {
                showMsg("children 为空" );
                this.list = [];
                return;
            };
            this.getCityData();
        },

        //获取省份
        getProData() {
            let prolist = clone(this.navigateData.jyptlist);

            this.sortNew(prolist, this.pageProvinceName);
            this.prolist = prolist;
            this.pageProvinceCode = prolist[0].code;
        },

        getCityData(){
            var curProvince = this.navigateData.jyptlist.find(val => val.city == this.pageProvinceName ),
                tarlist = curProvince?.children || [];

            var citylist = clone(tarlist);
            
            this.sortNew(citylist, this.pageCityName);
            this.list = citylist;
            this.findIdByChecked();
        },


        setWheel(){
            const that = this;
            var tabsContainer = document.querySelector(".platform-used-main");
            if(!tabsContainer) {return};
            tabsContainer.addEventListener("wheel", (event) => {
                event.preventDefault();
                tabsContainer.scrollLeft += event.deltaY;
            });

            var mainWork = document.querySelector(".platform-used");

            mainWork.onmouseover = function(){
                that.arrowShow = true;
            }

            mainWork.onmouseout = function(){
                that.arrowShow = false;
            }
        },

        /**
         * 城市排序
         */
        sortCity(cityname){
            const that = this;
            this.list.sort(function(a,b){
                if(a.city == cityname){
                    return -1
                }else {
                    return a.city.localeCompare(b.city, 'zh');//a~z 排序 
                }
            })
        },
        sortNew(arr, cityname, cityCode) {
            let list = arr.sort((a, b) => a.city.localeCompare(b.city, 'zh')); //a~z 排序
            var targetIndex = (list || []).findIndex((a) => a.city === cityname);
            let targetData = list[targetIndex];

            if(targetIndex == -1) {return};
            list.splice(targetIndex, 1);
            list.unshift(targetData);

            return list;
        },

        /**
         * 寻找选中状态的 id
         */
        findIdByChecked(){
            const that = this;
            for (let i = 0; i < that.list.length; i++) {
                if( !that.list[i].children ){return};
                for (let j = 0; j < that.list[i].children.length; j++) {
                    let itemCity = that.list[i].children;
                    let res = that.usedIdArr.includes(itemCity[j].serviceid);
                         
                    itemCity[j].checked = !!res ? true : false    
                }
                
            }
        },
        select(item){
            const that = this;

            let id = item.serviceid;
            let arr = [];

            if(item.checked){
                arr = [id,...that.usedIdArr];
            }else{
                arr = that.usedIdArr.filter(item => item != id);
            }
            this.$emit('update:usedIdArr', arr)
        },
        isDisabled(checked){
            let len = this.usedIdArr.length;
            if (len > 9 && !checked) {
                return true;
            } else {
                return false;
            }
        },
        left(){
            var navItem = document.querySelector(".platform-used-main");
            navItem.scrollLeft -= 300;
            if(navItem.scrollLeft == 0){
                this.leftArrowShow = false;
                this.rightArrowShow = true;
            }else{
                this.rightArrowShow = true;
            }
        },
        right(){
            var navItem = document.querySelector(".platform-used-main");
            navItem.scrollLeft += 300;
            var res = navItem.scrollLeft == (navItem.scrollWidth - navItem.clientWidth) ? true : false;
            if(res){
                this.rightArrowShow = false;
                this.leftArrowShow = true;
            }else{
                this.leftArrowShow = true
            }
        }
    },
    mounted() {
        this.pageProvinceName = this.usersProvince.valuename;
        this.pageProvinceCode = this.usersProvince.valueid;
        this.pageCityName = this.cityName;

        this.setWheel();
        this.getProData();
        this.getCityData();
        // this.$emit('update:usedIdArr',['1'])
    },
    beforeDestroy() {

    },
}
</script>

<style lang="scss" scoped>
    @import '@css/var.scss'; 
    .platform-used {
        position: relative;
        padding: 0 20px;

        .arrow {
                position: absolute;
                width: 100%;
                top: 140px;
                left: 0px;
                display: flex;
                justify-content: space-between;

                ::v-deep .el-button {
                    font-weight: 800;
                    font-size: 20px;
                    padding-top: 10px;
                }

        }
        .platform-used-main {
            display: flex;
            overflow: auto;
            overflow-x: hidden;

            .item {
                height: 240px;
                // background-color: #ccc;
                border-right: 1px solid #eeeeee;
                margin: 10px;

                &:last-child{
                    border: none;
                }

                h3 {
                    text-align: center;
                }

                .city {
                    height: 210px;
                    margin-top: 12px;
                    display: flex;
                    flex-wrap: wrap;
                    flex-direction: row;
                    writing-mode: vertical-lr;

                    ::v-deep .el-checkbox {
                        margin-right: 5px;

                        .el-checkbox__input {
                            padding-top: 5px;
                        }
                        

                        .el-checkbox__label {
                            writing-mode: horizontal-tb;
                            line-height: 24px;
                            display: block;
                            width: 67px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }

                    // ::v-deep .el-link {
                    //     writing-mode: horizontal-tb;
                    //     line-height: 24px;
                    //     display: block;
                    //     width: 67px;
                    //     overflow: hidden;
                    //     text-overflow: ellipsis;
                    //     white-space: nowrap;
                    // }

                }

            }
        }
    }
    
</style>
 